<template>
    <h-section title="业务需求流程历史" collapse>
        <div class="flow-text">
            <a @click.stop="showFlowImg(imgSrc)">查看流程图</a>
        </div>
        <a-table rowKey="taskId" size="small" :columns="tableColumns" :data-source="list" :pagination="false">
            <template #result="{ record }">
                {{ record.variables.result }}
            </template>
            <template #action="{ record }">
                <a v-if="record.taskId !== '-1'" @click="showDetail(record)">详情</a>
            </template>
        </a-table>
        <history-detail-modal ref="detailModalRef" v-bind="$attrs" />
    </h-section>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue';
import HistoryDetailModal from './historyDetailModal.vue';
import store from '@/store';
import { useFlowImg } from '@/hooks/content/useFlowImg';
import { defineComponent, ref, unref, reactive, toRefs, watch } from 'vue';
interface State {
    list: any[];
    imgSrc: string;
    showPreviewImg: boolean;
}
export default defineComponent({
    name: 'HistoryRecord',
    components: {
        HistoryDetailModal
    },
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const { getFlowImg, showFlowImg } = useFlowImg();
        const detailModalRef = ref<any>();
        const state = reactive<State>({
            list: [],
            imgSrc: '',
            showPreviewImg: false
        });
        // 表格表头栏
        const tableColumns = [
            {
                title: '节点开始时间',
                dataIndex: 'createTime',
                width: 150,
                align: 'center'
            },
            {
                title: '操作人',
                dataIndex: 'assigneeName',
                width: 100,
                align: 'center'
            },
            {
                title: '操作步骤',
                dataIndex: 'taskName',
                width: 100,
                align: 'center'
            },
            {
                title: '操作结果',
                dataIndex: 'result',
                slots: { customRender: 'result' },
                width: 100,
                align: 'center'
            },
            {
                title: '流程意见',
                dataIndex: 'taskDesc'
            },
            {
                title: '节点完成时间',
                dataIndex: 'endTime',
                width: 150,
                align: 'center'
            },
            {
                title: '操作',
                dataIndex: '',
                key: 'action',
                slots: { customRender: 'action' },
                align: 'center',
                width: 50
            }
        ];
        const getList = async () => {
            const query = {
                instanceId: props.detail.instanceId,
                type: 'requestInfo'
            };
            const { success, moule, errorMsg } = await api.historyModel.historyOperationByInstanceId(query);
            if (success) {
                if (moule && moule.length) {
                    state.list = [...moule];
                    initTaskUserInfo();
                }
            } else {
                message.error(errorMsg);
            }
        };
        // 生成右侧用户信息
        const initTaskUserInfo = () => {
            const info: any = [];
            state.list.forEach((item) => {
                const { taskId, taskName, assigneeName } = item;
                if (taskId >= 0) {
                    info.push({
                        taskName,
                        assigneeName
                    });
                }
            });
            store.commit('taskRequire/SET_TASKUSERINFO', info);
        };
        // 获取历史记录详情
        const getDetailData = async (taskId: number, taskName: string) => {
            const query = {
                taskId
            };
            const { success, moule, errorMsg } = await api.historyModel.findByTaskId(query);
            if (success) {
                let detailData = moule.variables[taskId] || moule.variables.param;
                if (detailData) {
                    detailData = JSON.parse(detailData);
                    detailData.taskName = taskName;
                    unref(detailModalRef).open(detailData);
                } else {
                    message.warning('暂无详情');
                }
            } else {
                message.error(errorMsg);
            }
        };
        const showDetail = ({ taskId, taskName }) => {
            getDetailData(taskId, taskName);
        };
        watch(
            () => props.detail,
            (n) => {
                if (n && n.instanceId) {
                    getList();
                    getFlowImg(n.instanceId).then((src: any) => {
                        state.imgSrc = src;
                    });
                }
            },
            { immediate: true, deep: true }
        );
        return {
            detailModalRef,
            ...toRefs(state),
            tableColumns,
            showDetail,
            showFlowImg
        };
    }
});
</script>
<style lang="less" scoped>
.flow-text {
    margin-bottom: 8px;
    a {
        font-size: 14px;
        margin-left: 8px;
    }
}
</style>
